<template>
  <div>
    <el-table :data="postlist" style="width: 100%">
      <el-table-column prop="id" label="编辑ID" width="150"> </el-table-column>

      <el-table-column prop="user.nickname" label="作者" width="200">
      </el-table-column>
      <el-table-column prop="title" label="标题"> </el-table-column>

      <el-table-column label="封面" width="100">
        <!-- slot-scope="scope"为作用域插槽  scope是参数 -->
        <template slot-scope="scope">
          <img
            v-if="scope.row.cover.length > 0"
            :src="$axios.defaults.baseURL + scope.row.cover[0].url"
            alt=""
          />
          <img v-else src="@/assets/a.jpg" alt="" />
        </template>
      </el-table-column>
      <el-table-column label="操作" width="100"
        ><template>
          <el-button type="success" size="small">编辑</el-button></template
        >
      </el-table-column>
    </el-table>
    <el-pagination
      background
      :page-sizes="[5, 7, 10, 20, 30]"
      layout="sizes,prev, pager, next,jumper"
      :total="total"
      @page-size="pageSize"
      @current-change="currentChange"
      @size-change="sizeChange"
    >
    </el-pagination>
  </div>
</template>

<script>
export default {
  data() {
    return {
      postlist: [],
      total: 0, //分页的总按钮
      pageIndex: 1, //条数
      pageSize: 10, //页数
    };
  },
  created() {
    this.loadpage();
  },
  methods: {
    currentChange(nexPostlist) {
      this.pageIndex = nexPostlist;
      this.loadpage();
    },
    sizeChange(nexpageSize) {
      this.pageSize = nexpageSize;
      this.loadpage();
    },
    loadpage() {
      this.$axios({
        url: "/post",
        params: {
          pageIndex: this.pageIndex,
          pageSize: this.pageSize,
        },
      }).then((res) => {
        console.log(res.data);
        this.postlist = res.data.data;
        this.total = res.data.total; //获取当前页数
      });
    },
  },
};
</script>

<style lang="less" scoped>
/deep/.el-table {
  line-height: 1px;
}
img {
  width: 100%;
  height: 50px;
}
</style>